<template>
	<view class="page">
		<!-- 顶部个人信息 -->
		<view class="section">
			<view class="group flex-row justify-between">
				<view class="flex-row" @click="handleProfileClick">
					<image class="section_4" :src="userInfo.avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image>
					<view class="group_4 flex-col">
						<text class="text_3" v-if="isLogin">{{ userInfo.nickname || '未设置昵称' }}</text>
						<text class="text_3" v-else>未登录</text>
						<view class="flex-row items-center mt-9">
							<text class="text_4" v-if="isLogin">ID: {{ userInfo.id || '未设置' }}</text>
							<text class="text_4" v-else>点击登录账号</text>
						</view>
					</view>
				</view>
				<view class="flex-row items-center" @click="handleProfileClick">
					<text class="font_3">资料完整度 {{ profileCompleteness }}%</text>
					<image class="image_6" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 认证状态 -->
			<view class="certification-status flex-row justify-between" v-if="isLogin">
				<view class="status-item flex-col items-center" v-if="userInfo.status === 2">
					<text class="status-text">资料待审</text>
				</view>
				<view class="status-item flex-col items-center" v-if="userInfo.vip_level > 0">
					<text class="status-text">{{ userInfo.vip_level_text }}</text>
				</view>
				<view class="status-item flex-col items-center" v-if="!userInfo.is_verified">
					<text class="status-text">实名认证失败</text>
				</view>
				<view class="status-item flex-col items-center" v-if="profileCompleteness < 80">
					<text class="status-text">请完善资料</text>
				</view>
			</view>
			
			<!-- 统计数据 -->
			<view class="equal-division flex-row justify-around">
				<view class="equal-division-item flex-col items-center" @click="goPage('/mine/matching/index')">
					<text class="font">{{ matchingStats.matched_count || 0 }}</text>
					<text class="text_10">我的牵线</text>
				</view>
				<view class="equal-division-item flex-col items-center" @click="goPage('/mine/likes/index')">
					<text class="font">{{ likesCount || 0 }}</text>
					<text class="text_10">我的收藏</text>
				</view>
				<view class="equal-division-item flex-col items-center" @click="goPage('/mine/followers/index')">
					<text class="font">{{ followersCount || 0 }}</text>
					<text class="text_10">谁收藏我</text>
				</view>
				<view class="equal-division-item flex-col items-center" @click="goPage('/mine/viewed/index')">
					<text class="font">{{ viewedCount || 0 }}</text>
					<text class="text_10">我看过谁</text>
				</view>
				<view class="equal-division-item flex-col items-center" @click="goPage('/mine/viewers/index')">
					<text class="font">{{ viewersCount || 0 }}</text>
					<text class="text_10">谁看过我</text>
				</view>
			</view>
		</view>
		
		<!-- VIP会员 -->
		<view class="vip-card flex-row justify-between items-center" @click="goPage('/mine/vip/index')">
			<view class="flex-row items-center">
				<image class="vip-icon" src="/static/images/vip.png" mode="aspectFit"></image>
				<text class="vip-text ml-3">{{ userInfo.vip_level > 0 ? 'VIP会员 ' + userInfo.vip_level + '级' : 'VIP会员未开通，立即开通' }}</text>
			</view>
			<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
		</view>
		
		<!-- 红娘服务 -->
		<view class="matchmaker-service flex-row justify-between items-center">
			<view class="flex-row items-center">
				<text class="service-text">您的专属红娘：</text>
				<text class="service-name">{{ matchmakerName || '暂无' }}</text>
			</view>
			<text class="service-phone">{{ matchmakerPhone || '' }}</text>
		</view>
		
		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-item flex-row justify-between items-center" @click="handleProfileClick">
				<view class="flex-row items-center">
					<image class="function-icon" src="/static/images/profile.png" mode="aspectFit"></image>
					<text class="function-text">基本资料</text>
				</view>
				<view class="flex-row items-center">
					<text class="function-desc">{{ profileDesc }}</text>
					<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="function-item flex-row justify-between items-center" @click="handlePhotosClick">
				<view class="flex-row items-center">
					<image class="function-icon" src="/static/images/photos.png" mode="aspectFit"></image>
					<text class="function-text">照片视频</text>
				</view>
				<view class="flex-row items-center">
					<text class="function-desc">{{ photosDesc }}</text>
					<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="function-item flex-row justify-between items-center" @click="handleIntroClick">
				<view class="flex-row items-center">
					<image class="function-icon" src="/static/images/intro.png" mode="aspectFit"></image>
					<text class="function-text">自我介绍</text>
				</view>
				<view class="flex-row items-center">
					<text class="function-desc">修改</text>
					<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="function-item flex-row justify-between items-center" @click="handlePreferenceClick">
				<view class="flex-row items-center">
					<image class="function-icon" src="/static/images/preference.png" mode="aspectFit"></image>
					<text class="function-text">择偶要求</text>
				</view>
				<view class="flex-row items-center">
					<text class="function-desc">{{ preferenceDesc }}</text>
					<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="function-item flex-row justify-between items-center" @click="handleVerifyClick">
				<view class="flex-row items-center">
					<image class="function-icon" src="/static/images/verify.png" mode="aspectFit"></image>
					<text class="function-text">诚信认证</text>
				</view>
				<view class="flex-row items-center">
					<text class="function-desc">{{ verifyDesc }}</text>
					<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="function-item flex-row justify-between items-center" @click="handlePromiseClick">
				<view class="flex-row items-center">
					<image class="function-icon" src="/static/images/promise.png" mode="aspectFit"></image>
					<text class="function-text">单身承诺</text>
				</view>
				<view class="flex-row items-center">
					<text class="function-desc">{{ promiseDesc }}</text>
					<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 设置 -->
			<view class="function-item flex-row justify-between items-center" @click="goPage('/mine/settings/index')">
				<view class="flex-row items-center">
					<image class="function-icon" src="/static/images/settings.png" mode="aspectFit"></image>
					<text class="function-text">设置</text>
				</view>
				<view class="flex-row items-center">
					<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import { getUserProfileApi, getProfileCompletenessApi } from '@/api/index.js';
	import { getMatchingStatisticsApi } from '@/api/matching.js';
	
	export default {
		data() {
			return {
				profileCompleteness: 0,
				profileDesc: '点击完善',
				photosDesc: '未上传',
				preferenceDesc: '未设置',
				verifyDesc: '去认证',
				promiseDesc: '待签署',
				matchmakerName: '',
				matchmakerPhone: '',
				likesCount: 0,
				followersCount: 0,
				viewedCount: 0,
				viewersCount: 0,
				matchingStats: {
					matched_count: 0,
					avg_score: 0
				}
			}
		},
		computed: {
			...mapState(['userInfo']),
			isLogin() {
				return !!this.userInfo && !!this.userInfo.id;
			}
		},
		onShow() {
			// 每次显示页面时检查登录状态
			this.checkLoginStatus();
			
			// 如果已登录，获取用户资料完整度
			if (this.isLogin) {
				this.getProfileCompleteness();
				this.getMatchingStatistics();
				this.updateDescriptions();
			}
		},
		methods: {
			checkLoginStatus() {
				// 检查是否已登录
				const token = uni.getStorageSync('token');
				if (!token && this.$store.state.userInfo) {
					// 清除用户信息
					this.$store.commit('setUserInfo', null);
				}
			},
			
			// 获取资料完整度
			getProfileCompleteness() {
				getProfileCompletenessApi().then(res => {
					if (res && res.percent !== undefined) {
						this.profileCompleteness = res.percent;
					}
				}).catch(err => {
					console.error('获取资料完整度失败', err);
				});
			},
			
			// 获取匹配统计数据
			getMatchingStatistics() {
				getMatchingStatisticsApi().then(res => {
					if (res) {
						this.matchingStats = res;
						this.likesCount = res.liked_me_today || 0;
					}
				}).catch(err => {
					console.error('获取匹配统计数据失败', err);
				});
			},
			
			// 更新各项描述文本
			updateDescriptions() {
				if (!this.userInfo) return;
				
				// 基本资料描述
				if (this.userInfo.age && this.userInfo.education) {
					this.profileDesc = `${this.userInfo.age}岁 ${this.userInfo.education} ${this.userInfo.occupation || ''}`;
				} else {
					this.profileDesc = '点击完善';
				}
				
				// 照片描述
				if (this.userInfo.photos_count) {
					this.photosDesc = `已上传${this.userInfo.photos_count}张`;
				} else {
					this.photosDesc = '未上传';
				}
				
				// 择偶要求描述
				if (this.userInfo.has_mate_criteria) {
					this.preferenceDesc = '已设置';
				} else {
					this.preferenceDesc = '未设置';
				}
				
				// 认证描述
				if (this.userInfo.is_verified) {
					this.verifyDesc = '已认证';
				} else {
					this.verifyDesc = '去认证';
				}
				
				// 单身承诺描述
				if (this.userInfo.has_signed_promise) {
					this.promiseDesc = '已签署';
				} else {
					this.promiseDesc = '待签署';
				}
			},
			
			// 处理登录或个人资料点击
			handleProfileClick() {
				if (!this.isLogin) {
					// 未登录，跳转到登录页
					this.$hr.methods.goPage('/login/index');
					return;
				}
				
				// 已登录，跳转到基本资料页
				this.$hr.methods.goPage('/mine/profile/index');
			},
			
			// 处理照片视频点击
			handlePhotosClick() {
				if (!this.isLogin) {
					this.$hr.methods.toast('请先登录');
					return;
				}
				this.$hr.methods.goPage('/mine/photos/index');
			},
			
			// 处理自我介绍点击
			handleIntroClick() {
				if (!this.isLogin) {
					this.$hr.methods.toast('请先登录');
					return;
				}
				this.$hr.methods.goPage('/mine/intro/index');
			},
			
			// 处理择偶要求点击
			handlePreferenceClick() {
				if (!this.isLogin) {
					this.$hr.methods.toast('请先登录');
					return;
				}
				this.$hr.methods.goPage('/mine/preference/index');
			},
			
			// 处理诚信认证点击
			handleVerifyClick() {
				if (!this.isLogin) {
					this.$hr.methods.toast('请先登录');
					return;
				}
				this.$hr.methods.goPage('/mine/verify/index');
			},
			
			// 处理单身承诺点击
			handlePromiseClick() {
				if (!this.isLogin) {
					this.$hr.methods.toast('请先登录');
					return;
				}
				this.$hr.methods.goPage('/mine/promise/index');
			},
			
			// 页面跳转方法
			goPage(url) {
				if (!this.isLogin && url !== '/login/index') {
					this.$hr.methods.toast('请先登录');
					return;
				}
				this.$hr.methods.goPage(url);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>
